<template>
  <div class="MapWarnPanel">
    <div class="MapWarnPanel--header">
      <div class="MapWarnPanel--header__title">我是点位名称</div>
      <div class="MapWarnPanel--header__close" @click="closeAction"></div>
    </div>
    <div class="MapWarnPanel--content">
      <div class="MapWarnPanel--content__subpanel">
        <div class="content">
          <div class="videoContainer">
            <MySimplePlayer
              v-if="$data.siplePalyerInfo"
              :cameraData="$data.siplePalyerInfo">
            </MySimplePlayer>
            <!--<H5VideoPlayer v-if="showCameraArr[1]" :camera="showCameraArr[1]"> </H5VideoPlayer>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getVideoPlayInfo} from '@/api/armyScreenApi.js'
import MySimplePlayer from "@/components/player/MySimplePlayer.vue";
import {ElScrollbar} from "element-plus";
import H5VideoPlayer from "@/components/h5player/H5VideoPlayer.vue";

const props = defineProps({
  info: {
    type: Object,
    default() {
      return {
        "cameraIndexCode": "fcd253f41fdd4f799c099997373b574c",
        "cameraName": "研发大门口",
        "x": "0",
        "y": "0",
        "hasAlarm": false,
        "alarmRecord": []
      }
    }
  }
})

const $emit = defineEmits(['close'])

const $data = reactive({
  siplePalyerInfo: null
  // siplePalyerInfo: {
  //   "language": "ZH-CN",
  //   "platIp": "10.19.187.58",
  //   "platePort": "443",
  //   "strToken": "SElLIHIzOVdhclNsOXJWTjJNUWI6WGx6QlMvbDY3blBzRmRHTklNYnNTcnBDKytja0F6ZStnTGg2dDBsNXNETT0=",
  //   "protocol": "https",
  //   "imultiRouteId": 0
  // }
})

onMounted(() => {
  getVideoPlayInfo().then(res => {
    console.log('res', res)
    nextTick(() => {
      $data.siplePalyerInfo = {
        indexCode: props.info.cameraIndexCode,
        cameraIndexCode: props.info.cameraIndexCode,
        ...res.data
      }

      // $data.siplePalyerInfo = {
      //   indexCode: props.info.cameraIndexCode,
      //   cameraIndexCode: props.info.cameraIndexCode,
      //   "language": "ZH-CN",
      //   "platIp": "10.19.187.58",
      //   "platePort": "443",
      //   "strToken": "SElLIHIzOVdhclNsOXJWTjJNUWI6WGx6QlMvbDY3blBzRmRHTklNYnNTcnBDKytja0F6ZStnTGg2dDBsNXNETT0=",
      //   "protocol": "https",
      //   "imultiRouteId": 0
      // }
    })
  })
})

function closeAction () {
  $emit('close')
}
</script>

<style lang="scss" scoped>
.MapWarnPanel {
  width: 466px;
  height: 300px;
  background-image: url('@/assets/images/armyScreen/常规视频播放bg@2x.png');
  background-size: cover;

  display: flex;
  flex-direction: column;

  &--header {
    height: 32px;
    line-height: 32px;
    padding-left: 36px;
    position: relative;

    &__title {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 500;
    }

    &__close {
      width: 24px;
      height: 24px;
      position: absolute;
      right: 8px;
      top: 3px;
      color: #0DFDF0;
      cursor: pointer;
    }
  }

  &--content {
    flex-grow: 1;

    &__subpanel {
      width: 462px;

      .content {
        margin-top: 8px;

        .videoContainer {
          width: 446px;
          height: 245px;
          //background-image: url('@/assets/images/armyScreen/sample1.png');
          //background-size: cover;
          margin: 0 auto;
          border: 1px solid mediumvioletred;
        }
      }
    }
  }
}
</style>
